<template>
	<div id="search">
		<form action="/">
			<van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
		</form>
		<div class="seg" v-if="bSeg">
			<p>热门搜索:</p>
			<span v-for="(item,index) in list" :key="index" @click="hot(item)">{{item}}</span>
		</div>
		<div class="no_goods" v-if="bGoods">
			<p>你搜索的商品不存在，换个搜索词试试吧-o-</p>
		</div>
		<div class="goods">
			<div class="good" v-for="item in goods" :key="item._id" @click='$router.push(`/goodsdil/${item._id}`).catch(() =>{})'>
				<img :src="item.tit_img[0]">
				<aside>
					<h3>{{item.name}}</h3><br>
					<h4>{{item.seb_name}}</h4>
					<span>已售出{{item.paid_num}}</span>
					<p>￥{{item.price}}</p>
				</aside>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'search',
		data() {
			return {
				value: "",
				goods: null,
				bGoods: false,
				bSeg: true,
				list: ["擦地吸尘器", "拖地吸尘器", "手持吸尘器", "除螨吸尘器", "智能吸尘器"],
			}
		},
		methods: {
			onCancel() {
				this.value = ""
				this.$router.go(-1)
			},
			hot(i) {
				this.value = i
				this.onSearch();
				this.bSeg = false;
			},
			onSearch() {
				this.$axios({
					url: "/goods",
					params: {
						_q: this.value
					}
				}).then(
					res => {
						if (res.err === 0) {
							this.bGoods = false;
							this.goods = res.data
						} else {
							this.goods = null
							this.bGoods = true
						}
					})
			}
		},
		mounted() {
			document.querySelector("input").focus()
		}

	}
</script>

<style scoped>
	.seg {
		padding: 0.2rem;
	}

	.seg p {
		float: left;
		line-height: 0.7rem;
		color: #ff595c;
	}

	.seg span {
		display: block;
		float: left;
		padding: 0.1rem;
		margin: 0.1rem;
		background-color: #ddd;
		border-radius: 0.1rem;
	}

	.no_goods p {
		width: 50vw;
		height: 3rem;
		font-size: 0.25rem;
		line-height: 0.5rem;
		margin: 20vw auto;
	}

	.goods {
		height: 10.35rem;
	}

	.good {
		width: 93vw;
		overflow: hidden;
		background-color: #fff;
		padding: 0.1rem;
		margin: 0.1rem;
		border: 1px solid lightgray ;
		border-radius: 0.2rem;
		
	}

	.good img {
		width: 1.7rem;
		float: left;
		margin: 0.1rem 0.2rem;
	}

	.good aside h3 {
		margin-top: 0.1rem;
	}

	.good aside h4 {
		margin-bottom: 0.2rem;
	}

	.good aside span {
		line-height: 0.4rem;
	}

	.good aside p {
		float: right;
		line-height: 0.4rem;
		font-size: 0.35rem;
		margin-right: 0.2rem;
		color: #ec232b;
	}
</style>
